<template>
	<view >
		<view>
			<view class="u-f">
				<view class="title ">工单编号</view><text>:</text>
				ZHD201912022
			</view>
			<view class="u-f">
				<view class="title">变电站名称</view><text>:</text>
				<view>变电站名称</view>
			</view>
			<view class="u-f">
				<view class="title">日期</view><text>:</text>
				ZHD201912022
			</view>
			<view class="u-f">
				<view class="title">发现人</view><text>:</text>
				<view>张三</view>
			</view>
			<view class="u-f">
				<view class="title">异常原因</view><text>:</text>
				<view class="reason">这里是异常原因异常原因异常原因异常原因异常原因异常原因异常原因异常原因</view>
			</view>
			<view>
				<scroll-view class="scroll-view_H" scroll-x="true">
					<block v-for="(item,index) in items" :key="index">
						<view class="scroll-view-item_H ">
							<image :src="item.url" @tap="previewImage" :data-index="index" mode=""></image>
						</view>
					</block>
				</scroll-view>
			</view>
		</view>
		<view>
			<uni-steps :options="options" direction="column" :active="0"></uni-steps>
		</view>
		<view class=""></view>
		<button type="primary" @tap="toggleShowPopUp">同意</button>
		<view>
			<work-advice :show="isShowPopUp" @close="toggleShowPopUp"></work-advice>
		</view>
	</view>
</template>

<script>
	import uniSteps from "../../components/uni-steps/uni-steps.vue"
	import workAdvice from "../../components/common/work-advice.vue"
	export default {
		data() {
			return {
				isShowPopUp:false,
				items:[
					{url:"../../static/logo.png"},
					{url:"../../static/logo.png"},
					{url:"../../static/logo.png"},
					{url:"../../static/logo.png"}
				],
				imageList:["../../static/logo.png","../../static/logo.png","../../static/logo.png","../../static/logo.png"],
				options:[
					{time:'2019.12.24 周二',department:'调控主任',status:'',advice:'运检部尽快处理'},
					{time:'2019.12.23 周一',department:'自动化专职',status:'',advice:'运检部尽快处理'},
					{time:'2019.12.22 周日',department:'工单申请已提交',status:'',advice:'运检部尽快处理'},
				]
			}
		},
		methods: {
			previewImage(e) {
				console.log(e);
				var imageIndex = e.currentTarget.dataset.index
				uni.previewImage({
					current: this.imageList[imageIndex],
					urls: this.imageList
				})
			},
			toggleShowPopUp(){
				this.isShowPopUp = !this.isShowPopUp
			},
			
		},
		components:{uniSteps,workAdvice}
	}
</script>

<style lang="less" scoped>
	.title{
		width: 220rpx;
		text-align-last:justify;
		text-align:justify;
		flex-shrink: 0;
	}
	.reason{
		flex: 1;
	}
	text{
		margin: 0 6rpx;
	}
	.scroll-view_H {
		white-space: nowrap;
		height: 300rpx;
		margin-top: 30rpx;
	}
	
	.scroll-view-item_H {
		display: inline-block;
		height: 100%;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
		margin: 0 20rpx;
		image{
			width: 260rpx;
			height: 260rpx;
			box-sizing: border;
			border: 16rpx solid #999999;
		}
	}
	
</style>
